<ion-header class="client-detail-header">
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backToProPage()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>客户详情</ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
    <!--<ion-toolbar class="self-header">-->
        <div class="base-info">
            <div class="baseMessage">
                <div class="client-panel part">
                    <p class="base-msg" [ngClass]="{'is-death':clientsData.deathFlag === 'Y'}">
                        <img src="{{clientAvatar}}" *ngIf="clientAvatar" class="sex-content"/>
                        <span class="name-content" [class.isDeath]="clientsData.deathFlag=='Y'" [class.load]="!requestStatus">{{clientsData.name?clientsData.name:'-'}}</span>
                        <span class="age-content" *ngIf="clientsData.age&&requestStatus">{{clientsData.age}}岁</span>
                    </p>
                </div>
                <div class="collect-panel" *ngIf="requestStatus&&isNull&&clientsData.clientRole!='I'" [class.isFavorited]="isFavorited" (click)="collectClickHandle()">
                    <i></i>
                    <span>{{isFavorited?'已收藏':'收藏'}}</span>
                </div>
                <div class="vip-panel" *ngIf="clientsData.vipFlag" [ngClass]="{'gold':clientsData.vipFlag == 1,'platinum':clientsData.vipFlag == 2,'diamond':clientsData.vipFlag == 3,'supreme':clientsData.vipFlag == 4}"></div>
            </div>
        </div>
   <!-- </ion-toolbar>-->

</ion-header>
<ion-content class="client-detail-content">
    <div class="main-content">
        <div class="top-panel device-pixel-border-bottom panel panel-border">
            <div class="con-grid">
                <div class="con-col col1" (click)="goToPolicyDetail(clientsData.totalPolicy)">
                    <div class="col-title">保单</div>
                    <div class="col-content">{{clientsData.totalPolicy?clientsData.totalPolicy:'-'}}</div>
                </div>
                <div class="con-col col2">
                    <div class="col-title">年缴保费</div>
                    <div class="col-content">{{clientsData.premium?(clientsData.premium  | numberTrans:1):'-'}}</div>
                </div>
                <div class="con-col col3" (click)="goToClientClaim(clientsData.totalClaim)">
                    <div class="col-title">理赔</div>
                    <div class="col-content">{{clientsData.totalClaim?clientsData.totalClaim:'-'}}</div>
                </div>
                <div class="clear-float"></div>
            </div>
        </div>
        <!-- 销售线索 -->
        <div class="panel panel-border saleLeads">
            <p>销售线索</p>
            <p class="signList"><span  *ngFor="let a of leadsList" (click)="goToleadsList(a)">{{a}}</span> <span class="leadsMore" >…</span></p>
        </div>
        <div class="panel panel-border base-panel">
            <div class="panel">
                <div class="panel-title">
                    <span>客户信息</span>
                    <button type="button" (click)="goToEdit()">
                        <i class="icon-edit"></i>
                        <span>编辑</span>
                    </button>
                </div>
                <div class="panel-item nameLengthBox device-pixel-border-bottom">
                    <span>姓名</span>
                    <span class="nameLength" [class.empty]="!clientsData.name">{{clientsData.name?clientsData.name:'-'}}</span>
                </div>
                <div class="panel-item device-pixel-border-bottom">
                    <span>性别</span>
                    <span [class.empty]="!clientsData.sex">{{clientsData.sex? (clientsData.sex=='M'?'男':'女') :'-'}}</span>
                </div>
                <div class="panel-item device-pixel-border-bottom">
                    <span>生日</span>
                    <span [class.empty]="!clientsData.birthDate">{{clientsData.birthDate?(clientsData.birthDate | dateTrans:'YYYY/MM/DD'):'-'}}</span>
                </div>
                <div class="panel-item device-pixel-border-bottom"
                     *ngFor="let phone of (clientsData.mobilePhone && clientsData.mobilePhone.length>0&&clientsData.mobilePhone[0].mobile)?clientsData.mobilePhone:[''] index as index">
                    <span>电话{{index>=1?index+1:''}}</span>
                    <span class="phoneNum"  [class.empty]="!phone.mobile">{{phone.mobile?phone.mobile:'-'}}</span>
                </div>
                <div
                    *ngFor="let address of (clientsData.addressList && clientsData.addressList.length>0)?clientsData.addressList:emptyAddress index as index">
                    <div class="panel-item word-break device-pixel-border-bottom">
                        <span>地址{{index>=1?index+1:''}}</span>
                        <span class="address" [class.empty]="!address.address">
                            {{address.address? address.address:'-'}}
                            <span *ngIf="address.defaultIndicator==1">
                                (定位)
                            </span>
                        </span>

                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>邮编{{index>=1?index+1:''}}</span>
                        <span [class.empty]="!address.postCode">{{address.postCode?address.postCode:'-'}}</span>
                    </div>
                </div>
                <div class="panel-item device-pixel-border-bottom">
                    <span>证件有效期</span>
                    <!--<span>{{clientsData.idExpiryDate?(checkIdDate(clientsData.idExpiryDate) | dateTrans:'YYYY/MM/DD'):'-'}}</span>-->
                    <span [class.empty]="!clientsData.idExpiryDate">{{clientsData.idExpiryDate?(clientsData.idExpiryDate|date:'yyyy/MM/dd'):'-'}}</span>
                </div>
            </div>
            <div class="toggle-panel">
                <div class="toggle-head">
                    <button (click)="changeOtherInfoOpenStatus()">
                        <i [ngClass]="otherInfoOpenStatus?'up':'down'"></i>
                        <span>{{otherInfoOpenStatus?'收起':'更多'}}</span>
                    </button>
                </div>
                <div [ngStyle]="{display:otherInfoOpenStatus?'block':'none'}" class="panel">
                    <div class="panel-item device-pixel-border-bottom">
                        <span>月收入</span>
                        <span [class.empty]="!clientsData.income">{{clientsData.income | monthlyIncome}}</span>
                    </div>
                    <div class="panel-item word-break device-pixel-border-bottom">
                        <span>职业类别</span>
                        <span [class.empty]="!clientsData.occupationType">{{clientsData.occupationType?clientsData.occupationType:'-'}}</span>
                    </div>
                    <div class="panel-item word-break device-pixel-border-bottom">
                        <span>职业</span>
                        <span [class.empty]="!clientsData.occupationDesc">{{clientsData.occupationDesc?(clientsData.occupationDesc=='旧代码'?'-':clientsData.occupationDesc):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>婚育</span>
                        <span [class.empty]="getMarriageType()=='-'">{{getMarriageType()}}</span>
                        <!--<span>{{clientsData.marriageType?clientsData.marriageType:'-'}}</span>-->
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>子女</span>
                        <span [class.empty]="!clientsData.childNum">{{clientsData.childNum?child[clientsData.childNum]:'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>住房</span>
                        <span [class.empty]="!clientsData.houseOwnership">{{clientsData.houseOwnership?(clientsData.houseOwnership==1?'租房':'自有'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>私家车</span>
                        <span [class.empty]="!clientsData.carOwnership">{{clientsData.carOwnership?(clientsData.carOwnership==1?'有':'无'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom" *ngIf="clientsData.clientRole!='I'">
                        <span>是否接力单客户</span>
                        <span [class.empty]="!clientsData.orphanFlag">{{clientsData.orphanFlag?(clientsData.orphanFlag=='Y'?'是':'否'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>有无投诉</span>
                        <span [class.empty]="!clientsData.complainFlag">{{clientsData.complainFlag?(clientsData.complainFlag=='Y'?'有':'无'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>有无保单贷款</span>
                        <span [class.empty]="!clientsData.loanFlag">{{clientsData.loanFlag?(clientsData.loanFlag=='Y'?'有':'无'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>有无保费逾期</span>
                        <span [class.empty]="!clientsData.overdueFlag">{{clientsData.overdueFlag?(clientsData.overdueFlag=='Y'?'有':'无'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom">
                        <span>是否绑定微服务</span>
                        <span [class.empty]="!clientsData.wechatFlag">{{clientsData.wechatFlag?(clientsData.wechatFlag=='Y'?'是':'否'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom" [class.last]="clientsData.otherIns!=1">
                        <span>是否在其他公司购买保险</span>
                        <span [class.empty]="!clientsData.otherIns">{{clientsData.otherIns?(clientsData.otherIns==1?'有':'无'):'-'}}</span>
                    </div>
                    <div class="panel-item device-pixel-border-bottom" [class.last]="clientsData.otherIns==1" *ngIf="clientsData.otherIns&&clientsData.otherIns==1">
                        <span>购买类型</span>
                        <span [class.empty]="!clientsData.insType">{{clientsData.insType?inType[clientsData.insType]:'-'}}</span>
                    </div>
                    <!--<div class="panel-item no-border">-->
                        <!--<span>客户来源</span>-->
                        <!--<span>{{clientsData.source?clientsData.source:'-'}}</span>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <!--<div class="panel">-->
        <!--<div class="panel-title">备注</div>-->
        <!--<div class="panel-item no-border">-->
        <!--<span>{{clientsData.remark?clientsData.remark:''}}</span>-->
        <!--<span></span>-->
        <!--</div>-->
        <!--</div>-->
        <client-detail-progress *ngIf="getProgress.clientId&&sameAsInsured==1" [typeNum]="1" [requestSuccess]="progressRequest"  [pageStatus]="sameAs" [progressList]="progressList" (detail)="goToNote(currentClientNum)"></client-detail-progress>
    </div>
    <ion-fab bottom center class="client-detail-btn-panel" *ngIf="requestStatus">
        <button ion-fab class="btn-box">
            <button class="btn-map btn-component" ion-button  (click)="goMap()" [disabled]="!clientsData.addressList.length||!clientsData.addressList[0]">
                <i></i>
                <span>地图</span>
            </button>
            <button class="btn-call btn-component" ion-button (click)="onePhoneCall()" [disabled]="!clientsData.mobilePhone[0]||!clientsData.mobilePhone[0].mobile">
                <i></i>
                <span>通话</span>
            </button>
        </button>
    </ion-fab>
   <!-- <ion-select #selectMobile interface="action-sheet" cancelText="取消" class="phoneList">
        <ion-option *ngFor="let one of clientsData.mobilePhone index as index"
                    (ionSelect)="callPhone(one.mobile)">{{one.mobile}}</ion-option>
    </ion-select>-->
</ion-content>
